<template>
	<view class="content">
		<f-navbar title="商品信息" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_info">
				<view class="goods_name_box">
					<view class="goods_name">
						商品名称<text class="bitian_icon">*</text>
					</view>
					<view class="goods_namenum">
						{{goodsNameNum}}/30
					</view>
				</view>
				<view class="goods_input">
					<input type="text" maxlength="30" :adjust-position="false" @input="ongoodsname" :value="goodsName" placeholder-class="place_class"
						placeholder="请写明品牌、商品名、属性、规格等关键信息">
				</view>
				<view class="line"></view>
				<view class="goods_imgbox">
					<view class="goods_imgtitle">
						商品封面图<text class="bitian_icon">*</text>
					</view>
					<view class="bohui_upload">
						<view class="uploadkuaidi" @click="onuploadcover">
							<image class="cameraicon" :src="imgurl+'zhaoxiangjiicon.png'" mode=""></image>
							上传图片
						</view>
						<view class="uploadkuaidi1" v-if="coverimg!==''">
							<image class="upload_close" @click="deletecoveritem" :src="imgurl+'closeicon.png'" mode="">
							</image>
							<image class="upload_photo1" :src="coverimg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="goods_imgbox">
					<view class="goods_imgtitle">
						商品主图<text class="bitian_icon">*</text>
					</view>
					<view class="bohui_upload">
						<view class="uploadkuaidi" @click="onuploadimg">
							<image class="cameraicon" :src="imgurl+'zhaoxiangjiicon.png'" mode=""></image>
							上传图片
						</view>
						<view class="uploadkuaidi1" v-for="(imgitem,imgindex) in picArr" :key="imgindex">
							<image class="upload_close" @click="deleteimg(imgindex)" :src="imgurl+'closeicon.png'"
								mode=""></image>
							<image class="upload_photo1" :src="imgitem" mode=""></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="goodsleimu_box" @click="ongoodsleimu">
					<view class="goodsleimu_title">
						商品类目<text class="bitian_icon">*</text>
					</view>
					<view class="goodsleimu_txt">
						{{catename}}<van-icon class="right_icon" name="arrow" size="18" color="#999" />
					</view>
				</view>
				<view class="goodsleimu_box1" @click="onchangestoreClass">
					<view class="goodsleimu_title">
						店铺类目
					</view>
					<view class="goodsleimu_txt">
						<text class="goodsleimu_txt1">{{markflag}}</text><van-icon class="right_icon" name="arrow" size="18" color="#999" />
					</view>
				</view>
				<view class="line"></view>
				<view class="goods_guige_box">
					<view class="goods_guigetitle">
						规格/库存<text class="bitian_icon">*</text>
					</view>
					<view class="goods_guige">
						<view class="goods_guigeth">
							<view class="guigeth_name">
								规格/尺码
							</view>
							<view class="guigeth_kucun">
								库存
							</view>
							<view class="guigeth_price">
								价格
							</view>
							<view class="guigeth_caozuo">
								操作
							</view>
						</view>
						<view class="goods_guigetd" v-for="(item,index) in guigeList" :key="index">
							<view class="guigeth_name1">
								{{item.spec_title}}
							</view>
							<view class="guigeth_kucun1">
								{{item.stock}}件
							</view>
							<view class="guigeth_price1">
								￥{{item.price}}
							</view>
							<view class="guigeth_caozuo1">
								<text class="edittxt" @click="onEditguige(item,index)">编辑</text>/<text
									@click="onguigeDelete(index)">删除</text>
							</view>
						</view>
						<!-- 		<view class="goods_guigetd">
							<view class="guigeth_name1">
								M码
							</view>
							<view class="guigeth_kucun1">
								20000件
							</view>
							<view class="guigeth_price1">
								￥46.5
							</view>
							<view class="guigeth_caozuo1">
								<text class="edittxt">编辑</text>/删除
							</view>
						</view> -->
					</view>
					<view class="goods_add" @click="addguige">
						<van-icon name="add-o" size="18" color="#FF7E00" />
						<view class="addtxt">
							添加
						</view>
					</view>
				</view>
			</view>

			<view class="goods_videobox">
				<view class="goods_imgtitle1">
					宣传视频
					<!-- <text class="bitian_icon">*</text> -->
				</view>
				<view class="video_box">
					<view class="videoitem" v-if="videoUrls!==''">
						<image class="videoicon" @click="deletevideo" :src="imgurl+'upload_close.png.png'" mode="">
						</image>
						<view class="videoimg">
							<video class="videoone" show-fullscreen-btn controls object-fit="contain"
								:src="videoUrls"></video>
						</view>
					</view>
					<view class="video_uploadbox" @click="chooseVideo">
						<view class="video_upload">
							<image class="video_class" :src="imgurl+'videouploadicon.png'" mode=""></image>
						</view>
						<view class="video_txt">
							上传视频
						</view>
					</view>

				</view>
			</view>

			<view class="goods_detailbox">
						<view class="goods_imgtitle1">
					商品详情<text class="bitian_icon">*</text>
				</view>
<!-- 				<view class="goods_textbox">
					<view class="goods_text">
						<textarea @input="ondetailvalue" maxlength="-1" :value="goodsdetails" auto-height placeholder-class="text_class" placeholder="请输入商品描述"></textarea>
					</view>
					<view class="goodsdetail_imgbox">
						<view class="uploadkuaidi" @click="onuploaddetailimg">
							<image class="cameraicon" :src="imgurl+'zhaoxiangjiicon.png'" mode=""></image>
							上传图片
						</view>
						<view class="uploadkuaidi1" v-for="(detailimgitem,detailimgindex) in picDetailArr" :key="detailimgindex">
							<image class="upload_close" @click="deletedetailimg(detailimgindex)" :src="imgurl+'upload_close.png.png'" mode=""></image>
							<image class="upload_photo1" :src="detailimgitem" mode=""></image>
						</view>
						
					</view>
				</view> -->
				<view class="tools">

					<view @click="addBold" class="item"><text class="iconfont icon-jiacu"
							:style="titleBold?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addXieti" class="item"><text class="iconfont icon-zitixieti"
							:style="titleXieti?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addBiaoti" class="item"><text class="iconfont icon-zitibiaoti"
							:style="titleBiaoti?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addXiahua" class="item"><text class="iconfont icon-zitixiahuaxian"
							:style="titleXiahua?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addUpload" class="item"><text class="iconfont icon-charutupian"
							:style="titleUpload?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addTest" class="item"><text class="iconfont icon-icon-test"
							:style="titleTest?'color:#0199fe':'color:#333'"></text></view>
					<view @click="addCop" class="item"><text class="iconfont icon-view-cop"
							:style="titleCop?'color:#0199fe':'color:#333'"></text></view>
				</view>
				<view class="content_editor">
					<editor id="editor" class="ql-container" :value="content" @input="inputEditor" show-img-toolbar show-img-resize
						:placeholder="placeholder" @ready="onEditorReady"></editor>
				</view>


			</view>
		</view>

		<!-- 商品类目弹窗 -->
		<van-popup :show="isgoodsleimu" round closeable position="bottom" @close="onCloseleimu">
			<view class="changeleimu_box">
				<view class="changeleimu_title">
					选择商品类目
				</view>
				<view class="leimuline"></view>
				<view class="content_top">
					<radio-group @change="checkboxChange">
						<view class="content_cellbox">
							<view class="content-cell" v-for="(markitem,markindex) in SystemCateList" :key="markindex">
								<radio :value="markitem.system_cate_id" :checked="markitem.ischecked" color="#FF0000"
									style="transform:scale(0.7)" class="round red" />{{markitem.title}}
							</view>

						</view>
					</radio-group>
				</view>
				<view class="leimusubmit" @click="onCSystemCate">
					保存
				</view>
			</view>
		</van-popup>


		<!-- 添加规格弹窗 -->
		<van-popup :show="isgoodsguige" round closeable custom-style="height: 70%;" position="bottom"
			@close="onCloseguige">
			<view class="guige_box">
				<view class="guige_box1">
					<view class="guige_boxtitle">
						规格信息
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="guige_item">
					<view class="guige_itemL">
						规格/尺码
					</view>
					<view class="guige_itemtxt">
						<input class="we_input" :adjust-position="false" :value="guigevalue" @input="onguige" type="text"
							placeholder="请输入规格/尺码，如M码" placeholder-class="place_class">
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="guige_item">
					<view class="guige_itemL">
						售卖价
					</view>
					<view class="guige_itemtxt">
						<input class="we_input" :adjust-position="false" :value="pricevalue" @input="onguigeprice" type="digit" placeholder="请输入"
							placeholder-class="place_class">
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="guige_item">
					<view class="guige_itemL">
						现货库存
					</view>
					<view class="guige_itemtxt">
						<input class="we_input" :adjust-position="false" :value="numvalue" @input="onguigenum" type="digit" placeholder="请输入"
							placeholder-class="place_class">
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="guigeimg_box">
					<view class="guigeimg_title">
						外观照片
					</view>
					<view class="guigeimg_upload">
						<view class="guigeimg" @click="onappearanceimg">
							<image class="guige_cameraicon" :src="imgurl+'zhaoxiangjiicon.png'" mode=""></image>
							上传图片
						</view>
						<view class="guigeimgitem" v-if="appearanceimg!==''">
							<image class="guige_close" @click="deleteappearanceimg" :src="imgurl+'closeicon.png'"
								mode=""></image>
							<image class="upload_photo1" :src="appearanceimg" mode=""></image>
						</view>

					</view>
				</view>
				<view class="guige_box1">
					<view class="guige_boxtitle">
						运费设置
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="kuaidibox">
					<view class="kuaidi_itembox">
						<view class="kuaidi_itemL">
							购买件数
						</view>
						<view class="kuaidi_itemtxt">
							<input class="we_input uni-input" :always-embed="true" :adjust-position="true" cursor-spacing="40" :value="buynumvalue" @input="onbuynum" type="digit"
								placeholder="请输入购买的件数" placeholder-class="place_class">
						</view>
					</view>
					<view class="kuaidi_itembox">
						<view class="kuaidi_itemL">
							运费
						</view>
						<view class="kuaidi_itemtxt">
							<input class="we_input uni-input" :always-embed="true" :adjust-position="true" cursor-spacing="40" :value="freightvalue" @input="onfreight" type="digit"
								placeholder="请根据购买件数添加运费费用" placeholder-class="place_class">
						</view>
					</view>
				</view>
				<view class="guigeline"></view>
				<view class="kuaidibox">
					<view class="kuaidi_itembox">
						<view class="kuaidi_itemL">
							超过购买件数
						</view>
						<view class="kuaidi_itemtxt">
							<input class="we_input uni-input" :always-embed="true" :adjust-position="true" cursor-spacing="40" :value="exceedbuynum" @input="onexceedbuynum" type="digit"
								placeholder="请输入购买的件数" placeholder-class="place_class">
						</view>
					</view>
					<view class="kuaidi_itembox">
						<view class="kuaidi_itemL">
							运费
						</view>
						<view class="kuaidi_itemtxt">
							<input class="we_input uni-input" :always-embed="true" :adjust-position="true" cursor-spacing="40" :value="exceedfreight" @input="onexceedfreight" type="digit"
								placeholder="请根据购买件数添加运费费用" placeholder-class="place_class">
						</view>
					</view>
				</view>
				<view class="guigeline"></view>


				<view class="guige_baocun" @click="guigesubmit">
					保存
				</view>

			</view>

		</van-popup>

		<view class="bottom">

		</view>
		<view class="bottom_box">
			<view class="bottom_btn" @click="onsubmit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getSystemCate,
		saveGoods,
		getGoodByCode
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {

				searchvalue: '', //搜索
				imgurl: getApp().globalData.imgurl,
				apiUrl: getApp().globalData.apiUrl,
				goodsName: '', // 商品名称
				goodsNameNum: '0', // 商品名称数量
				goodsdetails: '', // 商品详情描述
				isgoodsleimu: false, // 商品类目弹窗
				isgoodsguige: false, //善品规格弹窗
				guigevalue: '', // 规格输入的内容
				pricevalue: '', //规格价格
				numvalue: '', // 规格数量
				buynumvalue: '', //运费购买数量
				freightvalue: '', // 购买数量运费
				exceedbuynum: '', // 超出购买数量
				exceedfreight: '', // 超出购买数量运费
				guigeList: [], // 规格数组
				editorCtx: null,
				placeholder: '开始输入...',
				titleBold: false,
				titleXieti: false,
				titleBiaoti: false,
				titleFenge: false,
				titleXiahua: false,
				titleUpload: false,
				titleTest: false,
				titleCop: false,
				content: '',
				picArr: [], // 商品主图数据
				picDetailArr:[], // 商品详情图片
				coverimg: '', // 商品封面图
				appearanceimg: '', // 规格外观照片
				SystemCateList: [], // 商品类目数据
				Editguigeindex: '', //编辑规格的索引
				videoUrls: '', // 视频地址
				one: true,
				cateid:'', // id
				catename:'', // 选择的类目名称
				marksvalue:'', //店铺类目
				code:'', //商品code值
				ischecked:false,
				editId:'', // 编辑室的id
				markflag:'', //店铺类目名称



			}
		},
		onLoad(options) {
			// console.log(options.code);
			console.log('11111');
			
			if(options.code){
				// console.log(111);
				this.code = options.code
				this.getList()
			} else {
				console.log(222);
			}
			this.getSystemCate()
		},
		methods: {
			// 获取数据
			getList(){
				getGoodByCode({
					code:this.code,
				}).then(res => {
					if(res.code==1){
						// console.log(res);
						let i = ''
						this.goodsName = res.data.title
						this.coverimg = res.data.good_img
						this.picArr = JSON.parse(res.data.good_carousel)
						this.cateid = res.data.system_cate_id
						this.catename = res.data.cate_title
						this.marksvalue = res.data.marks_id
						this.videoUrls = res.data.good_video_url
						this.content = res.data.good_content
						this.guigeList = res.data.spec_val_json
						this.goodsNameNum = res.data.title.length
						 i = res.data.mark_flag.map(item=>{
							return item.title
						})
						this.markflag = i.join(',')
						console.log(this.markflag);
					} else {
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					}

					
				})
			},
			// 提交保存
			onsubmit(){
				console.log(JSON.stringify(this.picArr));
				console.log(this.marksvalue);
				saveGoods({
					code:this.code,
					title:this.goodsName,
					good_img:this.coverimg,
					good_carousel:JSON.stringify(this.picArr),
					system_cate_id:this.cateid,
					marks_id:this.marksvalue,
					good_video_url:this.videoUrls,
					good_content: this.content,
					spec_val:JSON.stringify(this.guigeList),
				}).then(res => {
					console.log(res);
					if(res.code==1){
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						console.log(prevPage);
						prevPage.$vm.getList(true)
						   uni.navigateBack({//返回
						     delta: 1
						   })
					} else {
						uni.showToast({
							title: res.info,
							icon:'none',
							duration:2000
						})
					}
				
				})
			},
			// 选择店铺分类页面
			onchangestoreClass(){
				uni.navigateTo({
					url:'/pages/subPack/changeStoreclass/changeStoreclass?marksvalue='+this.marksvalue
				})
			},
			// 获取商家标签数据
			getSystemCate() {
				getSystemCate({
					type:0
				}).then(res => {
					// console.log(res);
					// res.data.forEach(item=>{
					// 	item.ischecked = false
					// })
					this.SystemCateList = res.data

				})
			},

			//初始化、赋值
        initEditor: function(){
			let that = this
            var html = this.content;
            this.editorCtx.setContents({
                html:html,
                success:(res)=> {
					console.log(res);
					console.log('--------');
					console.log(that.editorCtx.blur());
					that.editorCtx.blur()
                },
                fail: (res) => {
					console.log('fail'+res);
                },
                complete:(res) => {
					console.log(res);
                }
            });
        },
			onEditorReady() {
				console.log('00000');
				// this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// console.log(this.editorCtx);
				// console.log(e);
				uni.createSelectorQuery().select('#editor').context((res) => {
					console.log('22222');
					console.log(res.context);
					this.editorCtx = res.context
					this.initEditor()
					  //     this.editorCtx.setContents({
					  //       'html': this.content,
							// success(res){
							// 	uni.pageScrollTo({
							// 	scrollTop: 0,
							// 	duration: 1
							// 	})
							// }
					  //     });
					  // this.editorCtx.blur()
				}).exec()
				
				// console.log('1111');
				

			},
			addBold() {
				this.titleBold = !this.titleBold
				this.editorCtx.format('bold')
			},
			addXieti() {
				this.titleXieti = !this.titleXieti
				this.editorCtx.format('italic')
			},
			addBiaoti() {
				this.titleBiaoti = !this.titleBiaoti
				this.editorCtx.format('header', this.titleBiaoti ? 'H2' : false)
			},
			addXiahua() {
				this.titleXiahua = !this.titleXiahua
				this.editorCtx.format('underline')
			},
			addUpload() {
				uni.chooseImage({
					success: res => {
						console.log('成功', res);
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths);
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									file: tempFilePaths[i],
									type: '1'
								},
								success: res => {
									console.log(res);
									uni.hideLoading()
								
									let data1 = JSON.parse(res.data)
									console.log(data1);
										this.editorCtx.insertImage({
											src: data1.data.url
										})						
								}
							});
							uni.showLoading({
								title: '正在上传...'
							})
						
						}
						// uni.showLoading({
						// 	title: 'loading...'
						// })
						// console.log(res);
						// for (let i = 0; i < res.tempFilePaths.length; i++) {
						// 	this.editorCtx.insertImage({
						// 		src: res.tempFilePaths[i]
						// 	})
						// }
						// uni.hideLoading()
					}
				})
			},
			addTest() {
				this.titleTest = !this.titleTest
				this.editorCtx.format('list', 'ordered')
			},
			addCop() {
				this.titleCop = !this.titleCop
				this.editorCtx.format('list', 'bullet ')
			},
			// 监听输入内容
			inputEditor(e) {
				console.log('000+'+e.detail.html);
				this.content = e.detail.html
			},
			// 规格删除
			onguigeDelete(e) {
				this.guigeList.splice(e, 1)
				console.log(this.guigeList);
			},
			// 规格保存
			guigesubmit() {
				if (this.Editguigeindex !== '') {
					if (this.guigevalue == '') {
						uni.showToast({
							title: '请输入规格',
							icon: 'none',
						})
					} else if (this.pricevalue == '') {
						uni.showToast({
							title: '请输入价格',
							icon: 'none',
						})
					} else if (this.numvalue == '') {
						uni.showToast({
							title: '请输入数量',
							icon: 'none',
						})
					} else if (this.appearanceimg == '') {
						uni.showToast({
							title: '请上传图片',
							icon: 'none',
						})
					} else {
						let guigeobj = {
							// id: this.guigeList.length,
							spec_title: this.guigevalue,
							price: this.pricevalue,
							stock: this.numvalue,
							good_item_img: this.appearanceimg,
							freight_num: this.buynumvalue,
							freight_price: this.freightvalue,
							over_freight_num: this.exceedbuynum,
							over_freight_price: this.exceedfreight,
							id: this.editId
						}
						this.guigeList.splice(this.Editguigeindex, 1, guigeobj)
						// this.guigeList.push(guigeobj)
						console.log(this.guigeList);
						this.isgoodsguige = false
						this.guigevalue = ''
						this.pricevalue = ''
						this.numvalue = ''
						this.appearanceimg = ''
						this.buynumvalue = ''
						this.freightvalue = ''
						this.exceedbuynum = ''
						this.exceedfreight = ''
						this.Editguigeindex = ''
					}
				} else {
					if (this.guigevalue == '') {
						uni.showToast({
							title: '请输入规格',
							icon: 'none',
						})
					} else if (this.pricevalue == '') {
						uni.showToast({
							title: '请输入价格',
							icon: 'none',
						})
					} else if (this.numvalue == '') {
						uni.showToast({
							title: '请输入数量',
							icon: 'none',
						})
					} else if (this.appearanceimg == '') {
						uni.showToast({
							title: '请上传图片',
							icon: 'none',
						})
					} else {
						let guigeobj = {
							// id: this.guigeList.length,
							spec_title: this.guigevalue,
							price: this.pricevalue,
							stock: this.numvalue,
							good_item_img: this.appearanceimg,
							freight_num: this.buynumvalue,
							freight_price: this.freightvalue,
							over_freight_num: this.exceedbuynum,
							over_freight_price: this.exceedfreight,
							id: 0 
						}

						this.guigeList.push(guigeobj)
						console.log(this.guigeList);
						this.isgoodsguige = false
						this.guigevalue = ''
						this.pricevalue = ''
						this.numvalue = ''
						this.appearanceimg = ''
						this.buynumvalue = ''
						this.freightvalue = ''
						this.exceedbuynum = ''
						this.exceedfreight = ''
					}
				}

			},

			//编辑功能
			onEditguige(e, i) {
				console.log(e);
				console.log(i);
				this.Editguigeindex = i
				this.isgoodsguige = true
				this.guigevalue = e.spec_title
				this.pricevalue = e.price
				this.numvalue = e.stock
				this.appearanceimg = e.good_item_img
				this.buynumvalue = e.freight_num
				this.freightvalue = e.freight_price
				this.exceedbuynum = e.over_freight_num
				this.exceedfreight = e.over_freight_price
				this.editId = e.id
				

			},
			// 超出运费
			onexceedfreight(e) {
				this.exceedfreight = e.detail.value
			},
			// 超出购买数量
			onexceedbuynum(e) {
				this.exceedbuynum = e.detail.value
			},
			// 购买数量运费
			onfreight(e) {
				this.freightvalue = e.detail.value
			},
			// 购买数量
			onbuynum(e) {
				this.buynumvalue = e.detail.value
			},
			// 输入规格数量
			onguigenum(e) {
				this.numvalue = e.detail.value
			},
			// 输入规格价格
			onguigeprice(e) {
				this.pricevalue = e.detail.value
			},
			// 输入规格
			onguige(e) {
				console.log(e.detail.value);
				this.guigevalue = e.detail.value
			},

			//添加规格弹窗
			addguige() {
				this.isgoodsguige = true
			},
			// 关闭规格弹窗
			onCloseguige() {
				this.isgoodsguige = false
				this.guigevalue = ''
				this.pricevalue = ''
				this.numvalue = ''
				this.appearanceimg = ''
				this.buynumvalue = ''
				this.freightvalue = ''
				this.exceedbuynum = ''
				this.exceedfreight = ''
				this.Editguigeindex = ''
				console.log(this.guigeList);
			},
			// 关闭类目弹窗
			onCloseleimu() {
				this.isgoodsleimu = false
				this.cateid = ''
				// this.catename =''
			},
			// 商品类目选择
			checkboxChange(e) {
				console.log(e);
				this.cateid = e.detail.value
				this.SystemCateList.find(item=>{
					if(item.system_cate_id == e.detail.value){
						console.log(item.title);
						this.catename = item.title
					}
				})
			},
			// 保存选择的数据
			onCSystemCate(){
				this.isgoodsleimu = false
				
			},
			// 打开商品类目弹窗
			ongoodsleimu() {
				this.isgoodsleimu = true
				this.SystemCateList.forEach((item)=>{
					if(this.cateid == item.system_cate_id){
						item.ischecked=true
					}
				})
				console.log(this.SystemCateList);
			},

			// 商品描述
			ondetailvalue(e) {
				console.log(e);
				this.goodsdetails = e.detail.value
			},
			// 删除上传的视频
			deletevideo() {
				this.videoUrls = ''
			},
			// 上传视频
			chooseVideo() {
				// 上传视频

				uni.chooseMedia({
					mediaType: ['video'],
					count: 1,
					sourceType: ['album', 'camera'],
					success: (responent) => {
						console.log(responent);
						uni.showLoading({
							mask: true,
							title: '上传中...'
						})
						let videoFile = responent.tempFiles[0].tempFilePath;
						uni.uploadFile({
							url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
							filePath: videoFile,
							name: 'file',
							formData: {
								file: videoFile,
								type: '2'
							},
							success: (res) => {

								let data = JSON.parse(res.data) //微信和头条支持
								console.log(data);
								// let videoUrls = res.data //百度支持
								if (data.code == 1) {
									uni.hideLoading()
									this.videoUrls = data.data.url
								}

							},
							fail:(err)=>{
								uni.hideLoading()
							}
						})
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},



			// 输入的商品名称
			ongoodsname(e) {
				console.log(e);
				this.goodsName = e.detail.value
				this.goodsNameNum = e.detail.cursor
			},
			// 删除规格外观图片
			deleteappearanceimg() {
				this.appearanceimg = ''
			},
			// 删除主图图片
			deleteimg(e) {
				let imgs = this.picArr
				imgs.splice(e, 1)
				this.picArr = imgs
				console.log(this.picArr);
			},
			// 删除封面图图片
			deletecoveritem() {
				this.coverimg = ''
			},
			// 删除详情图片
			deletedetailimg(e){
				let imgs = this.picDetailArr
				imgs.splice(e, 1)
				this.picDetailArr = imgs
				console.log(this.picDetailArr);
			},

			// 规格外观图片上传
			onappearanceimg() {
				uni.chooseImage({
					sourceType: ['camera', 'album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						console.log(tempFilePaths);
						// this.avatarimg = tempFilePaths
						uni.uploadFile({
							url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							formData: {
								file: tempFilePaths,
								type: '1'
							},
							success: res => {
								console.log(res);
								let data1 = JSON.parse(res.data)
								console.log(data1);
								if (data1.code == 1) {
									this.appearanceimg = data1.data.url

								}
								// console.log('上传成功', JSON.parse(res.data));
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

							}
						});
					},
					// fail: err => {
					// 	this.myToast('图片上传失败', 'none');
					// }
				});
			},
			// 上传商品封面图
			onuploadcover() {
				uni.chooseImage({
					sourceType: ['camera', 'album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						console.log(tempFilePaths);
						// this.avatarimg = tempFilePaths
						uni.uploadFile({
							url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							formData: {
								file: tempFilePaths,
								type: '1'
							},
							success: res => {
								console.log(res);
								let data1 = JSON.parse(res.data)
								console.log(data1);
								if (data1.code == 1) {
									this.coverimg = data1.data.url
									// setUserInfo({
									// 	fields:data1.data.url,
									// 	type:2
									// }).then(res1 => {
									// 	if(res1.code==1){
									// 		this.getList()
									// 	}
									// })
								}
								// console.log('上传成功', JSON.parse(res.data));
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

							}
						});
					},
					// fail: err => {
					// 	this.myToast('图片上传失败', 'none');
					// }
				});
			},
			// 上传商品详情图片
			onuploaddetailimg(){
				uni.chooseImage({
					count: 9,
					sourceType: ['camera', 'album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths);
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									file: tempFilePaths[i],
									type: '1'
								},
								success: res => {
									console.log(res);
									uni.hideLoading()
									// this.picArr.concat(JSON.parse(res.data).entity)
									let data1 = this.picDetailArr.concat(JSON.parse(res.data).data
										.url)
									// let data1 = JSON.parse(res.data)
									console.log(data1);
									this.picDetailArr = data1
									// console.log(this.picArr);
									// console.log(JSON.stringify(this.picArr));
									// if(data1.code==1){
									// 	setUserInfo({
									// 		fields:data1.data.url,
									// 		type:2
									// 	}).then(res1 => {
									// 		if(res1.code==1){
									// 			this.getList()
									// 		}
									// 	})
									// }
									// console.log('上传成功', JSON.parse(res.data));
									// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
				
								}
							});
							uni.showLoading({
								title: '正在上传...'
							})
				
						}
						// this.avatarimg = tempFilePaths
				
					},
					// fail: err => {
					// 	this.myToast('图片上传失败', 'none');
					// }
				});
			},
			// 上传商品主图图片
			onUploadimg() {
				let that = this
				if (that.picArr.length >= 6) {
					uni.showToast({
						title: `最多只能上传${that.picArr.length}张图片`,
						icon: 'none',
						mask: true,
						duration: 1500
					})
				} else {
					uni.chooseImage({
						count: 6,
						sourceType: ['camera', 'album'], //从相册选择
						success: chooseImageRes => {
							console.log('成功', chooseImageRes);
							const tempFilePaths = chooseImageRes.tempFilePaths;
							console.log(tempFilePaths);
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[i],
									name: 'file',
									formData: {
										file: tempFilePaths[i],
										type: '1'
									},
									success: res => {
										console.log(res);
										uni.hideLoading()
										// this.picArr.concat(JSON.parse(res.data).entity)
										let data1 = this.picArr.concat(JSON.parse(res.data).data
											.url)
										// let data1 = JSON.parse(res.data)
										console.log(data1);
										this.picArr = data1
										// console.log(this.picArr);
										// console.log(JSON.stringify(this.picArr));
										// if(data1.code==1){
										// 	setUserInfo({
										// 		fields:data1.data.url,
										// 		type:2
										// 	}).then(res1 => {
										// 		if(res1.code==1){
										// 			this.getList()
										// 		}
										// 	})
										// }
										// console.log('上传成功', JSON.parse(res.data));
										// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

									}
								});
								uni.showLoading({
									title: '正在上传...'
								})

							}
							// this.avatarimg = tempFilePaths

						},
						// fail: err => {
						// 	this.myToast('图片上传失败', 'none');
						// }
					});
				}
			},
			// 上传图片
			onuploadimg() {
				this.isshowupload = false
				this.onUploadimg()
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_info {
		width: 690rpx;
		/* height: 952rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 42rpx;
	}

	.goods_name_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 13rpx;
	}

	.goods_name {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.bitian_icon {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		margin-left: 8rpx;
		line-height: 28rpx;
	}

	.goods_namenum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		margin-right: 20rpx;
	}

	.goods_input {
		width: 557rpx;
		/* height: 27rpx; */
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		margin-left: 20rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.place_class {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #bbb;
	}

	.line {
		width: 650rpx;
		height: 4rpx;
		background: #EEEEEE;
		/* border-radius: 1rpx; */
		margin: 0 auto;
	}

	.goods_imgbox {
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.goods_imgtitle {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.uploadkuaidi {
		width: 93rpx;
		height: 93rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.bohui_upload {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.uploadkuaidi1 {
		width: 92rpx;
		height: 92rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* line-height: 45rpx; */
		position: relative;
		margin-bottom: 20rpx;
	}

	.upload_photo1 {
		width: 100%;
		height: 100%;
	}

	.cameraicon {
		width: 32rpx;
		height: 29rpx;
		margin-bottom: 9rpx;
	}

	.upload_close {
		width: 19rpx;
		height: 19rpx;
		/* background: #000; */
		position: absolute;
		left: 4rpx;
		top: 4rpx;
	}

	.goodsleimu_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.goodsleimu_box1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.goodsleimu_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.goodsleimu_txt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-right: 20rpx;
		display: flex;
		align-items: center;

		
	}
	.goodsleimu_txt1{
		width: 260rpx;
		overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  text-align: right;
	}

	.right_icon {
		margin-left: 8rpx;
	}

	.goods_guige_box {
		margin-top: 20rpx;
	}

	.goods_guigetitle {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.goods_guige {
		margin-top: 17rpx;
	}

	.goods_guigeth {
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.goods_guigetd {
		min-height: 60rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.guigeth_name {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_kucun {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_price {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_caozuo {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_name1 {
		width: 25%;
		text-align: center;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* padding-left: 20rpx; */
		padding: 0 10rpx;
	}

	.guigeth_kucun1 {
		width: 25%;
		text-align: center;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_price1 {
		width: 25%;
		text-align: center;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.guigeth_caozuo1 {
		width: 25%;
		text-align: center;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.edittxt {
		color: #FF7E00;
	}

	.goods_add {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.addtxt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF7E00;
	}

	.goods_videobox {
		width: 690rpx;
		/* height: 596rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.goods_imgtitle1 {
		margin-left: 20rpx;
	}

	.video_box {
		/* 		width: 109rpx;
		height: 109rpx;
		background: #EEEEEE;
		border-radius: 20rpx;
		border: 2rpx solid #EEEEEE; */
		/* margin: 0 auto; */
		margin-top: 20rpx;
		/* 		display: flex;
		align-items: flex-start; */
		/* margin-left: 42rpx; */
	}

	.video_uploadbox {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.video_upload {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 109rpx;
		height: 109rpx;
		background: #EEEEEE;
		border-radius: 20rpx;

		/* background: #000; */
	}

	.video_txt {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		line-height: 42rpx;
	}

	.video_class {
		width: 47rpx;
		height: 44rpx;
	}

	.videoitem {
		width: 650rpx;
		height: 350rpx;
		background: #EEEEEE;
		border-radius: 20rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.videoicon {
		width: 36rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}

	.videoimg {
		width: 100%;
		height: 100%;
	}

	.videoone {
		width: 100%;
		height: 100%;
	}

	.goods_detailbox {
		width: 690rpx;
		/* height: 450rpx; */
		min-height: 460rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.tools {
		display: flex;
		align-items: center;

	}

	.item {
		width: 15%;
	}

	.content_editor {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
	}

	.goods_textbox {
		width: 650rpx;
		min-height: 366rpx;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.goods_text {
		width: 560rpx;
		/* min-height: 150rpx; */
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.text_class {
		color: #999;
	}

	.goodsdetail_imgbox {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}

	.bottom {
		height: 118rpx;
	}

	.bottom_box {
		width: 100%;
		height: 98rpx;
		background: #FFFEFE;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.bottom_btn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}

	/* 商品类目弹窗样式 */
	.changeleimu_box {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.changeleimu_title {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.leimuline {
		width: 690rpx;
		height: 4rpx;
		background: #EEEEEE;
	}

	.content_top {
		width: 690rpx;
		/* height: 184rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 6rpx;
		padding: 30rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
	}

	/*每个页面公共css */
	/* //设置圆角 */
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
		border-radius: 100rpx;
		border: 2rpx solid #FF0000;
	}

	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
		background-color: #ffffff !important;
		border-color: #FF0000 !important;
		color: #FF0000 !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: '\2022';
	}

	/* //元素使用的时候就是使用 round 和 red */

	/*  重写 radio 样式  */
	/* 未选中的 背景样式 */
	radio .wx-radio-input {
		border-radius: 50%;
		/* 圆角 */
		width: 45rpx;
		height: 45rpx;
		border: 2rpx solid #ff0000;
		box-sizing: border-box;
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	radio .wx-radio-input.wx-radio-input-checked {
		border: none;
		background: #fff;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		border: 2rpx solid #ff0000;
		width: 45rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 45rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #ff0000;
		/* 对勾颜色 白色 */
		background: #fff;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
		box-sizing: border-box;
	}




	.content_cellbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.content-cell {
		/* width: 33%; */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-bottom: 30rpx;
		margin-right: 20rpx;
		/* line-height: 70rpx; */
	}

	.leimusubmit {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 45rpx;
		margin-bottom: 40rpx;
	}
	.guige_box{
		z-index: 999;
	}

	.guige_box1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.guige_boxtitle {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
	}

	.guige_item {
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.guige_itemL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 30rpx;
	}

	.guigeline {
		width: 690rpx;
		height: 4rpx;
		background: #EEEEEE;
		margin: 0 auto;
	}

	.guige_itemtxt {
		margin-right: 32rpx;
	}

	.we_input {
		text-align: right;
	}

	.place_class {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #DDDDDD;
	}

	.kuaidibox {}

	.kuaidi_itembox {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kuaidi_itemL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 30rpx;
	}

	.kuaidi_itemtxt {
		margin-right: 32rpx;
	}

	.guigeimg_box {}

	.guigeimg_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 41rpx;
		margin-left: 30rpx;
	}

	.guigeimg_upload {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.guigeimg {
		width: 93rpx;
		height: 93rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.guigeimgitem {
		width: 92rpx;
		height: 92rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* line-height: 45rpx; */
		position: relative;
		margin-bottom: 20rpx;
	}

	.guige_cameraicon {
		width: 32rpx;
		height: 29rpx;
		margin-bottom: 9rpx;
	}

	.guige_close {
		width: 19rpx;
		height: 19rpx;
		/* background: #000; */
		position: absolute;
		left: 4rpx;
		top: 4rpx;
	}

	.guige_baocun {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 41rpx;
		margin-bottom: 40rpx;
	}
	.uni-input{
		cursor-spacing:20
	}
</style>